<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="icon" href="images/chang.ico">
	<link rel="stylesheet" href="css/normalize.css">
	<link rel="stylesheet" href="css/common.css">
	<link rel="stylesheet" href="css/index.css">
	<!-- Bootstrap -->
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
		integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
	
	<!-- 点击爱心 -->
	<script src="./js/love.js"></script>
	<!-- L2Dwidget.js L2D网页动画人物 -->
	<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
	<script>
		L2Dwidget.init({
			"model": {
				"jsonPath": "https://unpkg.com/live2d-widget-model-tororo@1.0.5/assets/tororo.model.json",
				"scale": 1,
				"hHeadPos": 0.5,
				"vHeadPos": 0.618
			},
			"display": {
				"position": "right",
				"width": 100,
				"height": 150,
				"hOffset": -58,
				"vOffset": -53
			},
			"mobile": {
				"show": true,
				"scale": 0.5
			},
			"react": {
				"opacityDefault": 1.5,
				"opacityOnHover": 0.2
			}
		});
	</script>
	<!--
		      其他可选的模型：
		        小帅哥： https://unpkg.com/live2d-widget-model-chitose@1.0.5/assets/chitose.model.json
		        萌娘：https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json
		        白猫：https://unpkg.com/live2d-widget-model-tororo@1.0.5/assets/tororo.model.json
		        黑猫： https://unpkg.com/live2d-widget-model-hijiki@1.0.5/assets/hijiki.model.json
		        小可爱（女）：https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json
		        小可爱（男）：https://unpkg.com/live2d-widget-model-haruto@1.0.5/assets/haruto.model.json
		        初音：https://unpkg.com/live2d-widget-model-miku@1.0.5/assets/miku.model.json
		        圣职者妹妹：https://unpkg.com/live2d-widget-model-z16@1.0.5/assets/z16.model.json
		        茶杯犬：https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json
		        绿毛妹妹：https://unpkg.com/live2d-widget-model-tsumiki@1.0.5/assets/tsumiki.model.json
		        金龟子妹妹：https://unpkg.com/live2d-widget-model-unitychan@1.0.5/assets/unitychan.model.json
		        https://unpkg.com/live2d-widget-model-nito@1.0.5/assets/nito.model.json
		        https://unpkg.com/live2d-widget-model-ni-j@1.0.5/assets/ni-j.model.json
		        小阿狸： https://unpkg.com/live2d-widget-model-nico@1.0.5/assets/nico.model.json
		        https://unpkg.com/live2d-widget-model-nietzche@1.0.5/assets/nietzche.model.json
		        https://unpkg.com/live2d-widget-model-nipsilon@1.0.5/assets/nipsilon.model.json
		        女学生： https://unpkg.com/live2d-widget-model-hibiki@1.0.5/assets/hibiki.model.json
		    -->
	<!-- 页面CSS -->
	<title>辣条小长芳</title>
</head>


<body>
	<!-- 头部 -->
	<header>
		<nav class="navbar navbar-inverse">
			<div class="container-fluid">
				<!-- Brand and toggle get grouped for better mobile display -->
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
						data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
						<span class="sr-only">Toggle navigation</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<a class="navbar-brand" href="./index.html">首页</a>
				</div>

				<!-- Collect the nav links, forms, and other content for toggling -->
				<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav">
						<li><a href="./photos.html?id=1">相册</a></li>
						<li><a href="./video.html">视频</a></li>
						<li><a href="./game.html">游戏</a></li>
					</ul>
					<form class="navbar-form navbar-left">
						<div class="form-group">
							<input type="text" class="form-control searchInput" placeholder="Search">
						</div>
						<button type="submit" class="btn btn-default" onclick="search()">搜索</button>
					</form>
					<ul class="nav navbar-nav navbar-right">
						<li><a href="./talkRoom.html">聊天室</a></li>
						<li><a href="./dreamTree.html">许愿树</a></li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
								aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
							<ul class="dropdown-menu">
								<li><a href="#">Action</a></li>
								<li><a href="#">Another action</a></li>
								<li><a href="#">Something else here</a></li>
								<li role="separator" class="divider"></li>
								<li><a href="#">Separated link</a></li>
							</ul>
						</li>
					</ul>
				</div>
			</div>
		</nav>
	</header>

	<!-- 主体 -->
	<main>
	<video class="video" src="http://121.37.209.61:8080/upload/video/cxk001.mp4" autoplay loop muted></video>
		<div class="row">
			<div class="col-xs-12 col-md-12 echarts" id="myChart">
			</div>
		</div>
		
	</main>

	<!-- 脚部 -->
	<footer>
		
	</footer>

	<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<!-- echarts数据可视化 -->
	<!-- <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script> -->
	<script src="./js/echarts.min.js"></script>
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
		integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
		crossorigin="anonymous"></script>
	<script>
		$('.navbar-form').on('submit', function (e) {
			e.preventDefault()
		})
		
		function search(e) {
			let inputContent = $('.searchInput').val()
			let reg = /inputContent/
			let regResult = reg.test(document.body)
			// console.log(regResult);	
			console.log(String(document.body));
		}
		//echarts图表
		function getEcharts(dom, option) {
			var myChart = echarts.init(dom);
			setInterval(function () {
				var date = new Date();
				var second = date.getSeconds();
				var minute = date.getMinutes() + second / 60;
				var hour = (date.getHours() % 12) + minute / 60;
				option.animationDurationUpdate = 300;
				myChart.setOption({
					series: [
						{
							name: 'hour',
							animation: hour !== 0,
							data: [{ value: hour }]
						},
						{
							name: 'minute',
							animation: minute !== 0,
							data: [{ value: minute }]
						},
						{
							animation: second !== 0,
							name: 'second',
							data: [{ value: second }]
						}
					]
				});
			}, 1000);
			myChart.setOption(option);
		}
		getEcharts(document.getElementById('myChart'), {
			series: [
				{
					name: 'hour',
					type: 'gauge',
					startAngle: 90,
					endAngle: -270,
					min: 0,
					max: 12,
					splitNumber: 12,
					clockwise: true,
					axisLine: {
						lineStyle: {
							width: 15,
							color: [[1, 'rgba(0,0,0,0.7)']],
							shadowColor: 'rgba(0, 0, 0, 0.5)',
							shadowBlur: 15
						}
					},
					splitLine: {
						lineStyle: {
							shadowColor: 'rgba(0, 0, 0, 0.3)',
							shadowBlur: 3,
							shadowOffsetX: 1,
							shadowOffsetY: 2
						}
					},
					axisLabel: {
						fontSize: 20,
						distance: 25,
						formatter: function (value) {
							if (value === 0) {
								return '';
							}
							return value + '';
						}
					},
					anchor: {
						show: false,
						icon: 'path://M532.8,70.8C532.8,70.8,532.8,70.8,532.8,70.8L532.8,70.8C532.7,70.8,532.8,70.8,532.8,70.8z M456.1,49.6c-2.2-6.2-8.1-10.6-15-10.6h-37.5v10.6h37.5l0,0c2.9,0,5.3,2.4,5.3,5.3c0,2.9-2.4,5.3-5.3,5.3v0h-22.5c-1.5,0.1-3,0.4-4.3,0.9c-4.5,1.6-8.1,5.2-9.7,9.8c-0.6,1.7-0.9,3.4-0.9,5.3v16h10.6v-16l0,0l0,0c0-2.7,2.1-5,4.7-5.3h10.3l10.4,21.2h11.8l-10.4-21.2h0c6.9,0,12.8-4.4,15-10.6c0.6-1.7,0.9-3.5,0.9-5.3C457,53,456.7,51.2,456.1,49.6z M388.9,92.1h11.3L381,39h-3.6h-11.3L346.8,92v0h11.3l3.9-10.7h7.3h7.7l3.9-10.6h-7.7h-7.3l7.7-21.2v0L388.9,92.1z M301,38.9h-10.6v53.1H301V70.8h28.4l3.7-10.6H301V38.9zM333.2,38.9v10.6v10.7v31.9h10.6V38.9H333.2z M249.5,81.4L249.5,81.4L249.5,81.4c-2.9,0-5.3-2.4-5.3-5.3h0V54.9h0l0,0c0-2.9,2.4-5.3,5.3-5.3l0,0l0,0h33.6l3.9-10.6h-37.5c-1.9,0-3.6,0.3-5.3,0.9c-4.5,1.6-8.1,5.2-9.7,9.7c-0.6,1.7-0.9,3.5-0.9,5.3l0,0v21.3c0,1.9,0.3,3.6,0.9,5.3c1.6,4.5,5.2,8.1,9.7,9.7c1.7,0.6,3.5,0.9,5.3,0.9h33.6l3.9-10.6H249.5z M176.8,38.9v10.6h49.6l3.9-10.6H176.8z M192.7,81.4L192.7,81.4L192.7,81.4c-2.9,0-5.3-2.4-5.3-5.3l0,0v-5.3h38.9l3.9-10.6h-53.4v10.6v5.3l0,0c0,1.9,0.3,3.6,0.9,5.3c1.6,4.5,5.2,8.1,9.7,9.7c1.7,0.6,3.4,0.9,5.3,0.9h23.4h10.2l3.9-10.6l0,0H192.7z M460.1,38.9v10.6h21.4v42.5h10.6V49.6h17.5l3.8-10.6H460.1z M541.6,68.2c-0.2,0.1-0.4,0.3-0.7,0.4C541.1,68.4,541.4,68.3,541.6,68.2L541.6,68.2z M554.3,60.2h-21.6v0l0,0c-2.9,0-5.3-2.4-5.3-5.3c0-2.9,2.4-5.3,5.3-5.3l0,0l0,0h33.6l3.8-10.6h-37.5l0,0c-6.9,0-12.8,4.4-15,10.6c-0.6,1.7-0.9,3.5-0.9,5.3c0,1.9,0.3,3.7,0.9,5.3c2.2,6.2,8.1,10.6,15,10.6h21.6l0,0c2.9,0,5.3,2.4,5.3,5.3c0,2.9-2.4,5.3-5.3,5.3l0,0h-37.5v10.6h37.5c6.9,0,12.8-4.4,15-10.6c0.6-1.7,0.9-3.5,0.9-5.3c0-1.9-0.3-3.7-0.9-5.3C567.2,64.6,561.3,60.2,554.3,60.2z',
						showAbove: false,
						offsetCenter: [0, '-35%'],
						size: 120,
						keepAspect: true,
						itemStyle: {
							color: '#707177'
						}
					},
					pointer: {
						icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
						width: 12,
						length: '55%',
						offsetCenter: [0, '8%'],
						itemStyle: {
							color: '#C0911F',
							shadowColor: 'rgba(0, 0, 0, 0.3)',
							shadowBlur: 8,
							shadowOffsetX: 2,
							shadowOffsetY: 4
						}
					},
					detail: {
						show: false
					},
					title: {
						offsetCenter: [0, '30%']
					},
					data: [
						{
							value: 0
						}
					]
				},
				{
					name: 'minute',
					type: 'gauge',
					startAngle: 90,
					endAngle: -270,
					min: 0,
					max: 60,
					clockwise: true,
					axisLine: {
						show: false
					},
					splitLine: {
						show: false
					},
					axisTick: {
						show: false
					},
					axisLabel: {
						show: false
					},
					pointer: {
						icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
						width: 8,
						length: '70%',
						offsetCenter: [0, '8%'],
						itemStyle: {
							color: '#C0911F',
							shadowColor: 'rgba(0, 0, 0, 0.3)',
							shadowBlur: 8,
							shadowOffsetX: 2,
							shadowOffsetY: 4
						}
					},
					anchor: {
						show: true,
						size: 20,
						showAbove: false,
						itemStyle: {
							borderWidth: 15,
							borderColor: '#C0911F',
							shadowColor: 'rgba(0, 0, 0, 0.3)',
							shadowBlur: 8,
							shadowOffsetX: 2,
							shadowOffsetY: 4
						}
					},
					detail: {
						show: false
					},
					title: {
						offsetCenter: ['0%', '-40%']
					},
					data: [
						{
							value: 0
						}
					]
				},
				{
					name: 'second',
					type: 'gauge',
					startAngle: 90,
					endAngle: -270,
					min: 0,
					max: 60,
					animationEasingUpdate: 'bounceOut',
					clockwise: true,
					axisLine: {
						show: false
					},
					splitLine: {
						show: false
					},
					axisTick: {
						show: false
					},
					axisLabel: {
						show: false
					},
					pointer: {
						icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
						width: 4,
						length: '85%',
						offsetCenter: [0, '8%'],
						itemStyle: {
							color: '#C0911F',
							shadowColor: 'rgba(0, 0, 0, 0.3)',
							shadowBlur: 8,
							shadowOffsetX: 2,
							shadowOffsetY: 4
						}
					},
					anchor: {
						show: true,
						size: 15,
						showAbove: true,
						itemStyle: {
							color: '#C0911F',
							shadowColor: 'rgba(0, 0, 0, 0.3)',
							shadowBlur: 8,
							shadowOffsetX: 2,
							shadowOffsetY: 4
						}
					},
					detail: {
						show: false
					},
					title: {
						offsetCenter: ['0%', '-40%']
					},
					data: [
						{
							value: 0
						}
					]
				}
			]
		})

	</script>
</body>

</html>